:root {
}

.el-menu {
  --el-menu-bg-color: var(--sidebar-bg-color);
  --el-menu-hover-bg-color: var(--menu-hover-bg-color);
  --el-menu-active-bg-color: var(--menu-active-bg-color);
  --el-menu-active-color: var(--color-primary);
  --el-menu-text-color: var(--text-color);

  --el-menu-item-height: var(--menu-item-height);
  --el-menu-sub-item-height: var(--menu-item-height);
  // --el-menu-horizontal-sub-item-height: var(--menu-item-height);

  .el-menu-item {
    &.is-active {
      background-color: var(--el-menu-active-bg-color, var(--menu-active-bg-color)) !important;
    }
  }

  &.el-menu--collapse,
  &.el-menu--popup {
    .el-sub-menu {
      &.is-active {
        background-color: var(--el-menu-active-bg-color, var(--menu-active-bg-color)) !important;
      }
    }
  }

  .el-sub-menu {
    .el-sub-menu__title {
      &:hover {
        background-color: var(--el-menu-hover-bg-color, var(--menu-hover-bg-color)) !important;
      }
    }

    &.is-active {
      & > .el-sub-menu__title:first-child {
        color: var(--color-primary);
      }
    }
  }
}

// 垂直菜单 样式
.el-menu--vertical {
  padding-top: 4px;
  border-right: none !important;

  // 朴素菜单 样式
  .menu-item-plain {
    position: relative;

    &.is-active {
      &::before {
        content: '';
        display: inline-block;
        position: absolute;
        left: 0;
        width: 4px;
        height: 100%;
        background-color: var(--el-color-primary);
      }
    }

    &:hover {
      .menu-item-icon {
        transform: scale(1.2);
        transition: transform 0.25s ease;
      }
    }
  }

  .sub-menu-plain {
    .el-sub-menu__title {
      &:hover {
        .menu-item-icon {
          transform: scale(1.2);
          transition: transform 0.25s ease;
        }
      }
    }
  }

  // 折叠时 朴素菜单 样式
  &.el-menu--collapse {
    .menu-item-plain,
    .sub-menu-plain {
      .el-tooltip__trigger {
        display: flex;
        justify-content: center;
      }
      .menu-item-icon {
        margin-left: 10px;
      }
    }
  }

  // 圆角菜单 样式
  .menu-item-radius {
    margin: 0 4px 2px 4px;
    border-radius: var(--base-radius);

    &:hover {
      .menu-item-icon {
        transform: scale(1.2);
        transition: transform 0.25s ease;
      }
    }
  }

  .sub-menu-radius {
    border-radius: var(--base-radius);

    .el-sub-menu__title {
      margin: 0 4px 2px 4px;
      border-radius: var(--base-radius);

      &:hover {
        .menu-item-icon {
          transform: scale(1.2);
          transition: transform 0.25s ease;
        }
      }
    }
  }

  // 折叠时/弹出层 圆角菜单 样式
  &.el-menu--collapse,
  .el-menu--popup {
    .sub-menu-radius {
      margin: 0 4px 2px 4px;
      .el-sub-menu__title {
        margin: 0;
      }
    }
  }
}

// 横向菜单 样式
.el-menu--horizontal {
  border-bottom: none !important;

  // 朴素菜单 样式
  .menu-item-plain {
    position: relative;

    &:hover {
      .menu-item-icon {
        transform: scale(1.2);
        transition: transform 0.25s ease;
      }
    }
  }

  .sub-menu-plain {
    .el-sub-menu__title {
      &:hover {
        .menu-item-icon {
          transform: scale(1.2);
          transition: transform 0.25s ease;
        }
      }
    }
  }

  .el-menu--popup {
    padding: 2px;

    .menu-item-plain {
      position: relative;

      &.is-active {
        &::before {
          content: '';
          display: inline-block;
          position: absolute;
          left: 0;
          width: 4px;
          height: 100%;
          background-color: var(--el-color-primary);
        }
      }
    }
  }

  // 圆角菜单 样式
  .menu-item-radius {
    height: auto !important;
    margin: 4px 2px !important;
    border-bottom: none !important;
    border-radius: var(--base-radius);

    &:hover {
      .menu-item-icon {
        transform: scale(1.2);
        transition: transform 0.25s ease;
      }
    }
  }

  .sub-menu-radius {
    border-radius: var(--base-radius);
    margin: 4px 2px;

    &.is-active {
      background-color: var(--el-menu-active-bg-color, var(--menu-active-bg-color)) !important;
    }

    .el-sub-menu__title {
      border-radius: var(--base-radius);
      border-bottom: none !important;

      &:hover {
        .menu-item-icon {
          transform: scale(1.2);
          transition: transform 0.25s ease;
        }
      }
    }
  }
}
